<template>
    <div class="big">
        <p class="top">大家都在搜</p>
        <ul>
            <li v-for="(v,index) in arr" :key="index">
                <div class="box">        
                    <div class="left">
                        <span :class="{bgcOne:v.lId===1,bgcThree:v.lId===3}">{{ v.lId }}</span>
                        <p>{{ v.lContent }}</p>
                    </div>
                    <div class="right">
                        <span :class="{bgcTwo:v.rId===2}">{{ v.rId }}</span>
                        <p>{{ v.rContent }}</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
    name:"SearchMsg",
    props:{
        arr:{
            type:Array,
            required:true
        }
    }
}
</script>

<style scoped>
.big {
    padding-bottom: 66vw;
}
.top {
  width: 93.33333333vw;
  height: 7.86666667vw;
  line-height: 7.86666667vw;
  margin: auto;
  font-size: 4vw;
  color: #666666;
}
 ul li {
  height: 11.73333333vw;
  width: 100vw;
  border-bottom: 0.13333333vw solid #e4e4e4;
}
ul li .box {
  width: 94.13333333vw;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul li .box .left {
  width: 43.46666667vw;
  display: flex;
  align-items: center;
}
 ul li .box .right {
  width: 43.46666667vw;
  display: flex;
  align-items: center;
}
ul li .box span {
  width: 4vw;
  height: 4vw;
  line-height: 4vw;
  background: #cccccc;
  color: #fff;
  font-size: 2.13333333vw;
  text-align: center;
  margin-right: 2.66666667vw;
}

ul li .box .bgcOne {
    background: #f04230;
}
ul li .box .bgcTwo {
    background: #ff7e00;
}
ul li .box .bgcThree {
    background: #ffcc00;
}
ul li .box p {
  width: 35vw;
  white-space: nowrap;
  overflow: hidden;
  
  color: #333333;
  font-size: 4vw;
}

</style>